<template>
  <div v-if="editable && drag == false">
    <div
      class="edit-bar"
      v-if="isShowStyleBar"
      :style="{
        top: styleBarContentLayerXY.top + 'px',
        left: styleBarContentLayerXY.left + 'px',
      }"
    >
      <div
        class="btn"
        v-for="(item, index) in styleBtn"
        :key="index"
        @click.stop="clickBtn(item)"
      >
        <img :src="item.img" :alt="item.text" :title="item.text" />
        <div class="sub-list" v-if="item.expend">
          <div
            class="row-wrap"
            v-if="item.dataName == 'fontname' || item.dataName == 'fontsize'"
          >
            <div
              class="row"
              v-for="(row, i) in item.sub"
              :key="i"
              @click.stop="clickBtn(item, row)"
            >
              <span class="title">{{ row.text }}</span>
            </div>
          </div>
          <div
            class="row-wrap"
            v-if="item.dataName == 'forecolor' || item.dataName == 'backColor'"
          >
            <div class="color-box">
              <div
                class="box"
                v-for="(sub, i) in item.sub"
                :key="i"
                :style="{ 'background-color': sub }"
                @click.stop="clickBtn(item, sub)"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="file-size"
      v-if="isShowFileSize && (currType == 'image' || currType == 'video')"
      :style="{
        top: sizeTop + 'px',
        left: sizeLeft + 'px',
      }"
    >
      <div class="file-header">设置图片宽度（%）</div>
      <div class="file-content">
        <el-input-number
          size="mini"
          v-model="fileWidth"
          @change="
            $store.commit('mutationSetFileSize', {
              index: currIndex,
              width: fileWidth,
            })
          "
          :min="1"
          :max="100"
        ></el-input-number>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    editable: {
      type: Boolean,
      default: true,
    },
    drag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fileWidth: 100,
      currIndex: -1,
      currType: "",
      sizeTop: 0,
      sizeLeft: 0,
      styleBtn: [
        {
          dataName: "fontname",
          text: "字体",
          expend: true,
          img: require("../assets/img/fontName.png"),
          sub: [
            {
              text: "黑体",
              value: "SimHei",
            },
            {
              text: "宋体",
              value: "SimSun",
            },
            {
              text: "仿宋",
              value: "FangSong",
            },
            {
              text: "楷体",
              value: "KaiTi",
            },
            {
              text: "微软雅黑",
              value: "Microsoft YaHei",
            },
            {
              text: "华文细黑",
              value: "STXihei",
            },
            {
              text: "华文黑体",
              value: "STHeiti",
            },
            {
              text: "华文楷体",
              value: "STKaiti",
            },
            {
              text: "华文宋体",
              value: "STSong",
            },
            {
              text: "华文仿宋",
              value: "STFangsong",
            },
            {
              text: "幼圆",
              value: "YouYuan",
            },
            {
              text: "隶书",
              value: "LiSu",
            },
            {
              text: "方正舒体",
              value: "FZShuTi",
            },
            {
              text: "方正姚体",
              value: "FZYaoti",
            },
            {
              text: "华文彩云",
              value: "STCaiyun",
            },
            {
              text: "华文琥珀",
              value: "STHupo",
            },
            {
              text: "华文隶书",
              value: "STLiti",
            },
            {
              text: "华文行楷",
              value: "STXingkai",
            },
            {
              text: "华文新魏",
              value: "STXinwei",
            },
          ],
        },
        {
          dataName: "fontsize",
          text: "字号",
          expend: true,
          img: require("../assets/img/fontSize.png"),
          sub: [
            {
              text: "一号",
              value: 7,
            },
            {
              text: "二号",
              value: 6,
            },
            {
              text: "三号",
              value: 5,
            },
            {
              text: "四号",
              value: 4,
            },
            {
              text: "五号",
              value: 3,
            },
            {
              text: "六号",
              value: 2,
            },
            {
              text: "七号",
              value: 1,
            },
          ],
        },
        {
          dataName: "forecolor",
          text: "文字颜色",
          expend: true,
          img: require("../assets/img/fontColor.png"),
          sub: [
            "#fff3e7",
            "#ffe9d0",
            "#ffd8b5",
            "#ffcb9d",
            "#ffad72",

            "#dfffdc",
            "#c7ffc0",
            "#baffae",
            "#a7ff93",
            "#91ff7d",

            "#d2ffff",
            "#befeff",
            "#a4ffff",
            "#8fffff",
            "#66ffff",

            "#e7ebff",
            "#d7ddff",
            "#c2cbff",
            "#a9b6ff",
            "#97aeff",

            "#ffddfd",
            "#ffcbfd",
            "#ffb5f9",
            "#ffa2fe",
            "#ff90fe",

            "#ffe9ea",
            "#ffdbdc",
            "#ffc7c8",
            "#ffb0b2",
            "#ff9092",

            "#f2f2f2",
            "#d0d0d0",
            "#adadad",
            "#686868",
            "#505050",

            "#555555",
            "#444444",
            "#333333",
            "#222222",
            "#000000",

            "#ff0000",
            "#d30000",
            "#a30000",
            "#730000",
            "#440000",

            "#0cff00",
            "#0acf00",
            "#079c00",
            "#056700",
            "#034b00",

            "#00a6ff",
            "#0087cb",
            "#005d8c",
            "#003e5d",
            "#002c43",

            "#00ffee",
            "#00bfb2",
            "#008a81",
            "#005a54",
            "#003d39",

            "#1d00ff",
            "#1400d1",
            "#0e0094",
            "#090062",
            "#060044",

            "#8c00ff",
            "#6f00d0",
            "#480087",
            "#32005e",
            "#21003e",

            "#ff00c8",
            "#c2009f",
            "#7f0065",
            "#670052",
            "#3d0030",

            "#ff8000",
            "#c66300",
            "#874300",
            "#643200",
            "#2f1700",

            "#fff700",
            "#c5bf00",
            "#8b8600",
            "#666200",
            "#484500",
          ],
        },
        {
          dataName: "backColor",
          text: "背景颜色",
          expend: true,
          img: require("../assets/img/backColor.png"),
          sub: [
            "#fff3e7",
            "#ffe9d0",
            "#ffd8b5",
            "#ffcb9d",
            "#ffad72",

            "#dfffdc",
            "#c7ffc0",
            "#baffae",
            "#a7ff93",
            "#91ff7d",

            "#d2ffff",
            "#befeff",
            "#a4ffff",
            "#8fffff",
            "#66ffff",

            "#e7ebff",
            "#d7ddff",
            "#c2cbff",
            "#a9b6ff",
            "#97aeff",

            "#ffddfd",
            "#ffcbfd",
            "#ffb5f9",
            "#ffa2fe",
            "#ff90fe",

            "#ffe9ea",
            "#ffdbdc",
            "#ffc7c8",
            "#ffb0b2",
            "#ff9092",

            "#f2f2f2",
            "#d0d0d0",
            "#adadad",
            "#686868",
            "#505050",

            "#555555",
            "#444444",
            "#333333",
            "#222222",
            "#000000",

            "#ff0000",
            "#d30000",
            "#a30000",
            "#730000",
            "#440000",

            "#0cff00",
            "#0acf00",
            "#079c00",
            "#056700",
            "#034b00",

            "#00a6ff",
            "#0087cb",
            "#005d8c",
            "#003e5d",
            "#002c43",

            "#00ffee",
            "#00bfb2",
            "#008a81",
            "#005a54",
            "#003d39",

            "#1d00ff",
            "#1400d1",
            "#0e0094",
            "#090062",
            "#060044",

            "#8c00ff",
            "#6f00d0",
            "#480087",
            "#32005e",
            "#21003e",

            "#ff00c8",
            "#c2009f",
            "#7f0065",
            "#670052",
            "#3d0030",

            "#ff8000",
            "#c66300",
            "#874300",
            "#643200",
            "#2f1700",

            "#fff700",
            "#c5bf00",
            "#8b8600",
            "#666200",
            "#484500",
          ],
        },
        {
          dataName: "bold",
          text: "加粗",
          img: require("../assets/img/bold.png"),
        },
        {
          dataName: "italic",
          text: "斜体",
          img: require("../assets/img/italic.png"),
        },
        {
          dataName: "underline",
          text: "下划线",
          img: require("../assets/img/underline.png"),
        },
        {
          dataName: "strikeThrough",
          text: "中横线",
          img: require("../assets/img/strikeThrough.png"),
        },
        {
          dataName: "justifyCenter",
          text: "居中",
          img: require("../assets/img/justifyCenter.png"),
        },
        {
          dataName: "justifyLeft",
          text: "左对齐",
          img: require("../assets/img/justifyLeft.png"),
        },
        {
          dataName: "justifyRight",
          text: "右对齐",
          img: require("../assets/img/justifyRight.png"),
        },
        {
          dataName: "indent",
          text: "添加缩进",
          img: require("../assets/img/indent.png"),
        },
        {
          dataName: "outdent",
          text: "去掉缩进",
          img: require("../assets/img/outdent.png"),
        },
        {
          dataName: "undo",
          text: "后退一步",
          img: require("../assets/img/undo.png"),
        },
        {
          dataName: "redo",
          text: "前进一步",
          img: require("../assets/img/redo.png"),
        },
        {
          dataName: "removeFormat",
          text: "清空格式",
          img: require("../assets/img/clear.png"),
        },
      ],
    };
  },
  watch: {
    drag(val) {
      if (val) this.$store.commit("mutationIsShowStyleBar", false);
    },
    editable(val) {
      if (!val) this.$store.commit("mutationIsShowStyleBar", false);
    },
    currentBlockIndex(val) {
      this.currIndex = val;
      this.changeFileSize(val);
    },
  },
  computed: {
    isShowStyleBar() {
      return this.$store.state.isShowStyleBar;
    },
    isShowFileSize() {
      return this.$store.state.isShowFileSize;
    },
    styleBarContentLayerXY() {
      return this.$store.getters.getterStyleBarContentLayerXY;
    },
    currentBlockIndex() {
      return this.$store.state.currentBlockIndex;
    },
    currentPageBlocks() {
      return this.$store.state.currentPageBlocks;
    },
  },
  created() {
    document.execCommand("enableObjectResizing", false, "true"); // 启用图像大小可调整手柄
  },
  methods: {
    changeFileSize(index) {
      let dom = document.getElementsByClassName("edit"),
        currEdit = dom[index],
        children = currEdit.childNodes || [];
      this.currType = currEdit.getAttribute("type");
      this.sizeTop = currEdit.getBoundingClientRect().top + window.scrollY;
      this.sizeLeft = currEdit.getBoundingClientRect().left;
      for (var i = 0; i < children.length; i++) {
        var child = children[i];
        if (child.nodeName == "IMG" || child.nodeName == "VIDEO") {
          this.fileWidth = child.style.width.replace("%", "");
        }
      }
    },
    clickBtn(item, row) {
      console.log("修改样式：", item.text, row);
      if (row) {
        if (item.dataName == "forecolor" || item.dataName == "backColor") {
          document.execCommand(item.dataName, false, row);
        } else {
          document.execCommand(item.dataName, false, row.value || row.text);
        }
      } else {
        document.execCommand(item.dataName);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.file-size {
  position: absolute;
  z-index: 99 !important;
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  .file-header {
    margin-bottom: 20px;
    font-size: 13px;
  }
}
.edit-bar {
  position: absolute;
  z-index: 99999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  height: 32px;
  width: auto;
  font-size: 14px;
  border: 1px solid #eee;
  background-color: #fff !important;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
  .btn {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-right: 1px solid #eee;
    user-select: none;
    position: relative;
    img {
      width: auto;
      height: 55%;
    }
    &:hover {
      .sub-list,
      .hover-msg {
        display: block;
      }
    }
    .sub-list {
      position: absolute;
      display: none;
      top: 100%;
      left: 0;
      z-index: 9999;
      .row-wrap {
        background-color: #fff;
        border: 1px solid rgb(223, 223, 223);
        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
        padding: 0 8px;
        max-width: 180px;
        min-width: 100px;
        max-height: 400px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        .row {
          padding: 4px 0;
          font-size: 15px;
        }
        .color-box {
          width: 100%;
          height: auto;
          display: grid;
          grid-template-columns: repeat(5, 20%);
          grid-row-gap: 2px;
          grid-column-gap: 2px;
          padding: 10px 0;
          .box {
            margin: 2px;
            width: 15px;
            height: 15px;
            border: 1px solid #eee;
          }
        }
      }
    }
  }
  .btn:last-child {
    border: none !important;
  }
}
</style>